<template>
  <div class="preview">
    <el-icon class="icon" @click="handlePreview" title="头像预览">
      <View />
    </el-icon>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { View } from '@element-plus/icons-vue'
import { preview } from 'vue3-preview-image'

const props = defineProps({
  imgUrl: {
    type: String,
    default: ''
  }
})

const handlePreview = () => {
  preview(props.imgUrl)
}
</script>

<style lang='less' scoped>
.icon {
  font-size: 18px;
  color: #ccc;
  cursor: pointer;
}
.icon:hover {
  color: rgb(187, 187, 187);
}
</style>